<template>
  <div
    style="background-color: #eee;width:100%; height: 100vh;padding: 10px;box-sizing: border-box;"
  >
    <div v-if="!showLoading">
      <div class="upload_img">
        <div
          class="img_class"
          :style="
            'background-image:url(' +
              form.bg_url +
              '); background-color:' +
              form.bgcolor
          "
          v-if="form.one_url || form.bg_url"
          ref="capture"
          id="capture"
        >
          <img :src="form.one_url" class="img_url" />
          <div class="pv_total">浏览量: {{ pv_total }}</div>
        </div>
        <button @click="save" class="btn_up2 btn">生成图片</button>
      </div>
      <div>
        <div>
          <button class="btn_up btn" @click="clickFile(1)">点击上传人像</button>
          <input
            type="file"
            id="file"
            class="file_class"
            @change="fileChange1(1)"
            ref="fileDisplay1"
          />
        </div>
        <div class="position: relative;">
          <button
            class="btn_up btn"
            style="margin-left: 5px"
            @click="clickFile(2)"
          >
            上传背景图或选择颜色
          </button>
          <input
            type="file"
            id="file"
            class="file_class"
            @change="fileChange2(2)"
            ref="fileDisplay2"
          />
        </div>
        <color-picker v-model="colorValue" @change="colorChange"></color-picker>
      </div>

      <div class="tips">
        * 图片格式：JPEG、JPG、PNG（不支持8位、16位、64位PNG）、BMP、WEBP。
        <br />
        * 图像大小：输入图像大小不超过3M。<br />
        * 图像分辨率：分辨率要求小于1280×1280像素。<br />
        * URL地址中不能包含中文字符。<br />
      </div>
    </div>

    <!-- <div>test绘制</div>
    <div id="capture1" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
      <img :src="form.bg_url" alt />
    </div>
      <button @click="save">保存</button>-->
    <img :src="form.two_url" v-if="form.two_url" class="img_class" />
  </div>
</template>

<script>
import axios from "axios";
import html2canvas from "html2canvas";
import { ColorPicker } from "element-ui";
export default {
  data() {
    return {
      form: {
        one_url: "http://glack.oss-cn-shanghai.aliyuncs.com/1595224053000.jpg",
        two_url: "",
        three_url: "",
        bg_url: "http://glack.oss-cn-shanghai.aliyuncs.com/dsfxfsaf.jpg",
        bgcolor: "transparent"
      },
      showLoading: false,
      pv_total: 0,
      colorValue: ""
    };
  },
  methods: {
    async fileChange1() {
      let node = event.target.files[0];

      var formdata = new FormData();
      formdata.append("file", node);
      this.showLoading = true;
      const res = await axios.post("starpapi/upload", formdata);
      let starUrl = res.data.data.url;

      const res2 = await axios.post("starpapi/getstarphoto", { starUrl });
      this.form.one_url = res2.data.url;
      this.showLoading = false;
    },
    async fileChange2() {
      let node = event.target.files[0];

      var formdata = new FormData();
      formdata.append("file", node);
      this.showLoading = true;
      const res = await axios.post("starpapi/upload", formdata);
      this.form.bg_url = res.data.data.url;
      this.showLoading = false;
    },
    save() {
      var canvas = document.getElementById("canvas");
      console.log(canvas);
      /**
       * 将图片转换为base64
       * 解决html2canvas跨域合成失败的问题
       */
      this.showLoading = true;
      var getBase64Image = function(src, cb) {
        var img = document.createElement("img"),
          dataURL = "";
        img.src = src;
        img.crossOrigin = "Anonymous";
        img.onload = () => {
          var canvas = document.createElement("canvas");
          canvas.style = "display: none;";
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, img.width, img.height);
          dataURL = canvas.toDataURL();
          cb(dataURL);
        };
      };
      getBase64Image(this.form.bg_url, url => {
        this.form.bg_url = url;
      });
      getBase64Image(this.form.one_url, url => {
        this.form.one_url = url;
      });

      html2canvas(this.$refs.capture, {
        allowTaint: false,
        useCORS: true
      }).then(canvas => {
        let canvas2 = document.body.appendChild(canvas);
        canvas2.style = "display: none;";

        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        this.form.two_url = image.src;

        let divNode = document.createElement("div");
        divNode.innerText = "* 长按图片保存";
        divNode.style = "color: red;font-size: 12px;margin-top: 5px;";
        document.body.appendChild(divNode);
        // console.log(this.form.two_url);
      });
      this.showLoading = false;
    },
    clickFile(index) {
      if (index === 1) {
        console.log(this.$refs.fileDisplay);
        console.log(this.$refs.fileDisplay1.click());
      } else {
        console.log(this.$refs.fileDisplay2);
        console.log(this.$refs.fileDisplay2.click());
      }
    },
    async incrementPv() {
      const res = await axios.post("starpapi/counter");
      this.pv_total = res.data.data.num;
    },
    colorChange(e) {
      this.form.bgcolor = e;
      this.form.bg_url = "";
    }
  },
  mounted() {
    this.incrementPv();
  },
  components: {
    ColorPicker
  }
};
</script>

<style scoped>
.img_class {
  width: 100%;
  height: auto;
  top: 600px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.img_url {
  width: 100%;
  height: 100%;
  bottom: 0;
  object-fit: cover;
}
.file_class {
  margin-left: 100px;
  display: none;
}
.btn_up {
  border-radius: 20px;
  padding: 10px 35px;
}
.btn {
  background-color: #ffd137;
  color: #fff;
  font-size: 13px;
  border: none;
  outline: none;
  cursor: pointer;
}
.btn_up2 {
  margin: 5px 0;
  border-radius: 5px;
  padding: 10px;
}
.upload_img {
  margin-top: 20px;
}
.tips {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
.pv_total {
  color: #ffd137;
  font-size: 17px;
  float: right;
}
.uploadBg {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
